import React, { useEffect,useState } from 'react'
import './Reg.less'
import {RegApi} from "@/request/api"
import { useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import Img from "@/static/images/logo.png"
import {TextField,Button,Alert } from '@mui/material'
import Toast from '@/components/Toast/Toast'
import {useToast} from "@/utils/toast"
export default function Reg() {
  // 引入跳转
  const navigate = useNavigate();
  // 用户名和密码
  const [username,setUsername] = useState('')
  const [password,setPassword] = useState('')
  const dispatch = useDispatch()
  const toast = useToast()
  // 注册提交按钮
  const goreg = async()=>{
    // reg();
    if(username === "" || password === ""){
      toast("error","用户名和密码不能为空")
    }else{
      // 请求
      let res = await RegApi({
        nickName:username,
        phone:username,
        password:password
      })
      console.log(res);
      if(res.errCode === 0){
        toast("success","注册成功")
        setTimeout(()=>{
          navigate('/login')
        },1500)
      } else{
        toast("error","账号已经存在")
      }
    }
  }
  return (
    <div className='reg'>
      <img src={Img} alt="" />
      
      <div className='form'>
        <div className='title'>Reg Page</div>
      <TextField 
        value={username} 
        onChange={(v)=>{setUsername(v.target.value)}} id="outlined-basic" 
        label="用户名" 
        variant="outlined" 
      />
      <TextField 
        value={password} 
        id="outlined-basic" 
        label="密码" 
        onChange={(v)=>{setPassword(v.target.value)}} variant="outlined" 
        type="password"
      />
      <Button variant="contained" onClick={goreg}>立即注册</Button>
      <div className='fan' onClick={()=>{navigate("/login")}}>返回登录</div>
      </div>
      <div className='gowhere'>
        
        {/* <div>前往官网</div> */}
      </div>
      <div>&copy;版权所有 淘淘</div>
    </div>
  )
}
